<template>
  <div class="top-top">
    <el-button @click="back" style="float: left;">
      <template #icon>
        <iconBackone></iconBackone>
      </template>返回课程列表
    </el-button>


    <div class="center">
      <el-input v-model="input" style="width: 240px" placeholder="输入作业名称搜索" @keyup.enter="seach"/>
      <el-button @click="seach">
        <template #icon>
          <iconSeach></iconSeach>
        </template>
      </el-button>
    </div>

    <div class="left">
      <el-radio-group v-model.number="radioStatus" @change="status">
        <el-radio :value=0>未提交</el-radio>
        <el-radio :value=1>已提交</el-radio>
        <el-radio :value=4>已批阅</el-radio>
        <el-radio :value=5>已提醒</el-radio>
        <el-radio :value=6>已保存</el-radio>
      </el-radio-group>
    </div>
  </div>

<div class="list">

  <div class="main">
    <el-table :data="workList" style="width: 100%;" :row-style="{height:'55px'}" :header-row-style="{height:'55px'}">
      <el-table-column prop="taskName" label="作业名称" align="center" />
      <el-table-column prop="aiScore" label="AI得分" align="center"/>
      <el-table-column prop="teacherScore" label="老师评分" align="center"/>
      <el-table-column prop="totalPoints" label="总分" align="center"/>
      <el-table-column prop="endTime" label="截止时间" align="center"/>
      <el-table-column label="状态" align="center" #default="scope">
        <div v-if="scope.row.state==0" style="color: red;">未完成</div>
        <div v-if="scope.row.state==1" style="color: green;">已完成</div>
        <div v-if="scope.row.state==4" style="color: green;">已批阅</div>
        <div v-if="scope.row.state==5" style="color: orange;">提醒</div>
        <div v-if="scope.row.state==6" style="color: blue;">已保存</div>
      </el-table-column>
      <el-table-column label="操作" align="center" #default="scope">
        <el-button style="border: 0;" @click="lookWork(scope.row.taskId,scope.row.taskName)">
          <template #icon>
            <iconArrow></iconArrow>
          </template>
        </el-button>
      </el-table-column>
    </el-table>
    <div class="page">
    <el-pagination
    :total="total"
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    layout="total,prev, pager, next"
    @current-change="handleCurrentChange"
  />
  </div>
  </div>

</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import iconSeach from '../../../assets/seach.vue';
import iconArrow from '../../../assets/arrow.vue';
import iconBackone from '../../../assets/backone.vue';
import { getWorkListAPI} from '../../../api/student/work'
import { useRouter,useRoute } from 'vue-router';
import { onMounted } from 'vue';

const router=useRouter()
const {params,query}=useRoute()
const val=ref(query.courseId as any)
const courseId=parseInt(val.value)
const total=ref(8)
const classId=ref(2010)
const input=ref('')
const radioStatus=ref(0)
const selectValue = ref('')
const currentPage=ref(1)
const pageSize=ref(10)
const workList = ref([])
const back=()=>{
console.log("点击了返回按钮")
router.go(-1)
}
const status=()=>{
console.log("点击了作业状态",radioStatus.value)
getWorkList()
}
const seach=()=>{
console.log("输入的关键词",input.value)
getWorkList()
}
const lookWork=(id: number,workName: string)=>{
console.log("点击了操作按钮",id)
console.log("作业名称",workName)
router.push({
  path:'/st-home/studyPlace/workInfo',
  query:{
    workId:id,
    workName:workName
  }
})
}
//分页
const handleCurrentChange=()=>{
console.log("当前页码数",currentPage.value)
getWorkList()
}
// 获取作业列表
const getWorkList=async()=>{
let params={
  classId:classId.value,
  courseId:courseId,
  pageNo:currentPage.value,
  pageSize:pageSize.value,
  isAsc:true,
  state:radioStatus.value,
  taskName:input.value,
}
console.log("提交到后端的数据",params)
const result=await getWorkListAPI(params)
console.log("获取到的作业列表",result)
workList.value=result.data.data.list
total.value=result.data.data.total
}
onMounted(()=>{
getWorkList()
})
</script>

<style scoped>
.top-top{
width: 100%;
height: 6%;
padding-top: 1%;
}
.list{
/* position: absolute; */
width: 100%;
height: 88%;
/* background-color: aqua; */
margin-top: 1%;
/* border: 1.5px solid #D4D7DE; */
border-radius:8px;

box-shadow: var(--el-box-shadow-light);
display: flex;
flex-direction: column;
}
.top{
width: 100%;
height: 10%;
/* background-color: aliceblue; */
border-bottom: 1.5px solid rgba(77, 76, 76, 0.404);
/* display: flex; */
}
.left{
height: 100%;
width: 40%;
/* background-color: bisque; */
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
/* flex: 1; */
float: left;
}
.center{
/* flex: 1; */
height: 100%;
width: 33%;
/* background-color: rgb(29, 74, 114); */
float: left;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.right{
height: 100%;
width: 33%;
float: left;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.main{
width: 100%;
height: 100%;
/* padding-top: 1%; */
display: flex;
flex-direction: column;
}
.el-table_body tr,.el-table_body td{
height: 199px;
}
.page{
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: auto;
margin-bottom: 1%;
}
:deep(.btn-prev){
/* background-color: rgb(1, 85, 158); */
height: 1em;
}
:deep(.number){
/* background-color: rgb(54, 121, 180); */
height: 1em;
}
:deep(.btn-next.is-last){
/* background-color: antiquewhite; */
height: 1em;
}
:deep(.el-pagination){
height: 1em;
}
:deep(.more.btn-quickprev.el-icon){
height: 1em;
}
:deep(.more.btn-quicknext.el-icon){
height: 1em;
}
</style>